<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 公司列表 </el-breadcrumb-item>
                <el-breadcrumb-item>{{ isStatus }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="98px">
                    <el-form-item label="公司名称">
                        <el-input v-model="form.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="公司LOGO">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="companyLogoEvent"
                            :before-upload="beforeUpload"
                            :data="companyLogo"
                        >
                            <img v-if="form.companyLogo" :src="form.companyLogo" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="产品视频标题">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-success="VideoCoverEvent"
                            :before-upload="companyProductVCSbeforeUpload"
                            :data="VideoCoverData"
                        >
                            <!-- form.qrCode == 产品视频标题 二维码改的懒得重名名 -->
                            <video v-if="getForm.companyProductVCS" :src="video0Src" class="avatar" controls />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="公司简介">
                        <el-input type="textarea" rows="5" v-model="form.companyIntroduce" style="width: 500px"></el-input>
                    </el-form-item>
                    <el-form-item label="公司详细介绍">
                        <el-input type="textarea" rows="5" v-model="form.companyDetailIntro"></el-input>
                    </el-form-item>
                    <el-form-item label="公司介绍图">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="companyIntroduceImgEvent"
                            :before-upload="beforeUpload"
                            :data="companyIntroduceImg"
                        >
                            <img v-if="form.companyIntroduceImg" :src="form.companyIntroduceImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="公司实景图">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :show-file-list="false"
                            :on-success="companyPictureImgEvent"
                            :before-upload="beforeUpload"
                            :data="companyPictureImg"
                        >
                            <img v-if="form.companyPictureImg" :src="form.companyPictureImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="公司视频">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-success="companyIntroduceVideoEvent"
                            :before-upload="videoUpload"
                            :data="companyIntroduceVideo"
                        >
                            <!-- <img v-if="form.companyIntroduceVideo" :src="form.companyIntroduceVideo" class="avatar" /> -->
                            <video controls v-if="getForm.companyIntroduceVideo" :src="video1Src" class="avatar"></video>
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="产品宣传视频">
                        <el-upload
                            class="avatar-uploader"
                            :action="$myUrl.BASEURL + 'system/resourceFileUpload'"
                            :on-success="companyProductVideoEvent"
                            :before-upload="videoUpload"
                            :data="companyProductVideo"
                        >
                            <video controls v-if="getForm.companyProductVideo" :src="video2Src" class="avatar"></video>
                            <!-- <img v-if="form.companyProductVideo" :src="form.companyProductVideo" class="avatar" /> -->
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <el-button @click="$router.push('/company-list')">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import VueCropper from 'vue-cropperjs';
import seleSearch from '../common/sele-search';
//import { getCompany, updateCompany, addCompany } from '../../api/company';
export default {
    name: 'baseform',
    components: {
        VueCropper,
        seleSearch
    },
    data() {
        return {
            VideoCoverData: {
                fileGroup: 'company',
                fileidentName: 'VideoCover'
            },
            companyLogo: {
                //公司LOGO
                fileGroup: 'company',
                fileidentName: 'companyLogo'
            },
            companyIntroduceImg: {
                //介绍图
                fileGroup: 'company',
                fileidentName: 'companyIntroduceImg'
            },
            companyIntroduceVideo: {
                //介绍视频
                fileGroup: 'company',
                fileidentName: 'companyIntroduceVideo'
            },
            companyPictureImg: {
                //实景图
                fileGroup: 'company',
                fileidentName: 'companyPictureImg'
            },
            companyProductVideo: {
                //宣传视频
                fileGroup: 'company',
                fileidentName: 'companyProductVideo'
            },

            form: {
                companyDetailIntro: '',
                companyIntroduce: '',
                companyName: '',
                companyLogo: '',
                qrCode: '',
                companyIntroduceImg: '',
                companyIntroduceVideo: '',
                companyPictureImg: '',
                companyProductVideo: ''
            },
            getForm: {
                companyLogo: '',
                qrCode: '',
                companyIntroduceImg: '',
                companyIntroduceVideo: '',
                companyPictureImg: '',
                companyProductVideo: '',
                companyProductVCS: ''
            },
            defaultSrc: require('../../assets/img/img.jpg'),
            fileList: [],
            imgSrc: '',
            cropImg: '',
            dialogVisible: false,
            isStatus: '新增公司',
            video0Src: '',
            video1Src: '',
            video2Src: ''
        };
    },
    created() {
        this.cropImg = this.defaultSrc;

        //console.log(this.$route.query.companyId);
        if (this.$route.query.companyId) {
            this.getCompanyData();
        }
    },
    methods: {
        getCompanyData() {
            axios.get(this.$myUrl.BASEURL + 'company/getCompany?companyId=' + this.$route.query.companyId).then((res) => {
                console.log('公司详情', res);
                // 简介
                this.form.companyName = res.data.data.companyName;
                this.form.companyIntroduce = res.data.data.companyIntroduce;
                this.form.companyDetailIntro = res.data.data.companyDetailIntro;
                // 上传路径
                this.getForm.companyLogo = res.data.data.companyLogo;
                this.getForm.qrCode = res.data.data.qrCode;
                this.getForm.companyIntroduceImg = res.data.data.companyIntroduceImg;
                this.getForm.companyPictureImg = res.data.data.companyPictureImg;
                this.getForm.companyProductVCS = res.data.data.companyProductVCS;
                this.getForm.companyIntroduceVideo = res.data.data.companyIntroduceVideo;
                this.getForm.companyProductVideo = res.data.data.companyProductVideo;

                // 拼接路径
                this.form.companyLogo = this.$myUrl.IMGURL + res.data.data.companyLogo;
                this.form.qrCode = this.$myUrl.IMGURL + res.data.data.qrCode;
                this.form.companyIntroduceImg = this.$myUrl.IMGURL + res.data.data.companyIntroduceImg;
                this.form.companyPictureImg = this.$myUrl.IMGURL + res.data.data.companyPictureImg;
                // 产品视频标题
                this.video0Src = this.$myUrl.IMGURL + res.data.data.companyProductVCS;
                // 公司视频
                this.video1Src = this.$myUrl.IMGURL + res.data.data.companyIntroduceVideo;
                // 产品视频
                this.video2Src = this.$myUrl.IMGURL + res.data.data.companyProductVideo;
                //console.log(res.data);
                // this.form = res.data.data;companyProductVideo
            });
        },
        beforeUpload() {},
        companyLogoEvent(res, file) {
            this.getForm.companyLogo = res.data.relativePath;
            this.form.companyLogo = URL.createObjectURL(file.raw);
            //console.log(this.form.companyLogo);
            //console.log(this.form.companyLogo);
            //console.log(this.form.companyLogo);
        },
        VideoCoverEvent(res, file) {
            // console.log(res);
            // console.log(res);
            // console.log(file);
            // console.log(res.data.relativePath);
            this.getForm.companyProductVCS = res.data.relativePath;
            console.log(this.getForm.companyProductVCS);
            this.video0Src = URL.createObjectURL(file.raw);
        },
        companyIntroduceImgEvent(res, file) {
            this.getForm.companyIntroduceImg = res.data.relativePath;
            this.form.companyIntroduceImg = URL.createObjectURL(file.raw);
        },
        companyIntroduceVideoEvent(res, file) {
            this.video1Src = this.$myUrl.IMGURL + res.data.relativePath;
            this.getForm.companyIntroduceVideo = res.data.relativePath;
            this.form.companyIntroduceVideo = URL.createObjectURL(file.raw);
        },
        companyPictureImgEvent(res, file) {
            this.getForm.companyPictureImg = res.data.relativePath;
            this.form.companyPictureImg = URL.createObjectURL(file.raw);
        },
        companyProductVideoEvent(res, file) {
            // console.log(res);
            // console.log(file);
            this.video2Src = this.$myUrl.IMGURL + res.data.relativePath;
            this.getForm.companyProductVideo = res.data.relativePath;
            this.form.companyProductVideo = URL.createObjectURL(file.raw);
            console.log(this.form.companyProductVideo);
        },
        // 上传视频的限制
        videoUpload(file) {
            console.log(file);
            const isVideo = file.type === 'video/mp4';
            // const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isVideo) {
                this.$message.error('只能上传视频');
            }
            // if (!isLt2M) {
            //     this.$message.error('上传头像图片大小不能超过 2MB!');
            // }
            return isVideo;
        },
        handleAvatarSuccess() {},
        beforeAvatarUpload() {},
        load() {
            // this.count += 2
        },
        onSubmit() {
            // console.log(this.$route.query.companyId);
            if (this.form.companyName == '') {
                this.$message.error('请输入公司名称');
            } else if (this.getForm.companyLogo == '') {
                this.$message.error('请上传公司LOGO');
            } else if (this.getForm.companyProductVCS == '') {
                this.$message.error('请上传公司视频标题');
            } else if (this.form.companyIntroduce == '') {
                this.$message.error('请输入公司简介');
            } else if (this.form.companyDetailIntro == '') {
                this.$message.error('请输入公司详细介绍');
            } else if (this.getForm.companyIntroduceImg == '') {
                this.$message.error('请上传公司介绍图');
            } else if (this.getForm.companyPictureImg == '') {
                this.$message.error('请上传公司实景图');
            } else if (this.getForm.companyIntroduceVideo == '') {
                this.$message.error('请上传公司视频');
            } else {
                if (this.$route.query.companyId) {
                    // 编辑公司
                    axios
                        .put(this.$myUrl.BASEURL + 'company/updateCompany', {
                            ...this.getForm,
                            companyName: this.form.companyName,
                            companyIntroduce: this.form.companyIntroduce,
                            companyDetailIntro: this.form.companyDetailIntro,
                            // companyProductVCS: this.form.companyLogo,
                            id: this.$route.query.companyId
                        })
                        .then((res) => {
                            // console.log('编辑成功！',res);
                            this.$message.success('编辑成功！');
                            this.$router.push('/company-list');
                        });
                } else {
                    // 新增公司
                    axios
                        .post(this.$myUrl.BASEURL + 'company/addCompany', {
                            ...this.getForm,
                            companyName: this.form.companyName,
                            companyIntroduce: this.form.companyIntroduce,
                            companyDetailIntro: this.form.companyDetailIntro
                            // companyProductVCS: this.form.companyLogo
                        })
                        .then((res) => {
                            // console.log(res);
                            this.$message.success('新增成功！');
                            this.$router.push({
                                path: '/company-list'
                            });
                        });
                }
            }
        },
        setImage(e) {
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                return;
            }
            const reader = new FileReader();
            reader.onload = (event) => {
                this.dialogVisible = true;
                this.imgSrc = event.target.result;
                this.$refs.cropper && this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
        },
        cropImage() {
            this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        cancelCrop() {
            this.dialogVisible = false;
            this.cropImg = this.defaultSrc;
        },
        imageuploaded(res) {
            //console.log(res);
        },
        handleError() {
            this.$notify.error({
                title: '上传失败',
                message: '图片上传接口上传失败'
            });
        },
        companyProductVCSbeforeUpload(file) {
            // video/mp4
            console.log(file.type);
            const isVideo = file.type === 'video/mp4';
            const isLt30M = file.size / 1024 / 1024 < 30;

            if (!isVideo) {
                this.$message.error('只能上传视频!');
            }
            if (!isLt30M) {
                this.$message.error('上传视频大小不能超过 30MB!');
            }
            return isVideo && isLt30M;
        }
    }
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
}
.content-title {
    font-weight: 400;
    line-height: 50px;
    margin: 10px 0;
    font-size: 22px;
    color: #1f2f3d;
}
.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}
.crop-demo {
    display: flex;
    align-items: flex-end;
}
.crop-demo-btn {
    position: relative;
    width: 100px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-left: 30px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}
.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 356px;
    height: 178px;
    display: block;
}
</style>